@charset "utf-8";

@import "reset";

$font-size:40;

@function r($px){
    @return $px/$font-size*1rem;
}

html,body{
    width: 100%;
    height: 100%;
    position: relative;
}

.web{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../img/wedding-bg.jpg')no-repeat;
    background-size:100% ;
}

#backBtn{
    display: inline-block;
    width: r(41);
    height: r(41);
    position: absolute;
    right: r(56);
    bottom: r(25);
    img{
        width: 100%;
        height: 100%;
    }
}


.title{
    width: r(260);
    height: r(40);
    font-size: r(40);
    color: #E7C598;
    position: absolute;
    left: 50%;
    margin-left: r(-120);
    top: r(325);  
}

#exchangemsg2{
    position: absolute;
    left: 50%;
    margin-left: r(-164);
    top: r(400);
    input{
     appearance: none;
     border: 0;
     -webkit-appearance: none;
    width: r(328);
    height: r(53);
    border-radius: r(7);
    background-color: #e7c598;
    text-indent: r(6);
    }
    
}

#submitBtn{
    position: absolute;
    left: 50%;
    margin-left: r(-125);
    top: r(510);
    width: r(250);
    height: r(45);
    img{
        width: 100%;
        height: 100%;
    }
}

.pop-up-windows{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        .closeBtn{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        #successmsg{
            font-size: r(40);
            color: #bf0c21;
            text-align: center;
            line-height: r(250);
        }
        
}
}



.pop-up-windows1{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    .window-tc1{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        .closeBtn{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        #losemsg{
            font-size: r(40);
            color: #bf0c21;
            text-align: center;
            line-height: r(250);
        }
         #agentBtn{
            display: inline-block;
            width: r(195);
            height: r(37);
            background: #bf0c21;
            color: #e7c598;
            text-align: center;
            border-radius: r(10);
            position: absolute;
            left: r(109);
            bottom: r(50);
            font-size: r(22);
            line-height: r(37);
        }
        
}
}